<template>
    <view class="container" :style="themeColor">
		<header-bar :config="config"></header-bar>
		<view :style="{ height: listHeight }" class="index-page-box">
			<mescroll-uni ref="mescrollRef" :height="listHeight" @init="mescrollInit" :down="downOption" :up="upOption" @up="getData">
				<view class="list-item" v-for="(item, index) in datas" :key="index" @click="goDetail(item)">
					<view class="main_left">
						<iconsfont customIcons="icon-xitonggonggao" color="#ffffff" size="44"></iconsfont>
					</view>
					<view class="main_right">
						<view class="font-28">
							<view>{{ item.V_MessageTypeName }}</view
							><text>{{ item.ModifyTime }}</text>
						</view>
						<text>{{ item.Title }}</text>
					</view>
				</view>
			</mescroll-uni>
		</view>
    </view>
</template>

<script>
import { getInfoListByBusinessId } from "@/service/api/siteMessage.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
export default {
    components: {},
    data() {
        return {
			config: {
			    title: "消息中心",
			    back: false,
			    centerSlot: true,
			},
			listHeight: "500px",
            datas: [],
        }
    },
    mounted() {
        //#ifndef MP
        this.refresh()
        //#endif
		this.$nextTick(() => {
		    //获取商品高度
		    getElementHeight(this, ".index-page-box", (e) => {
		        e = e - 64
		        this.listHeight = e + "px"
		    })
		})
    },
    methods: {
        getData(e) {
            let param = {
                MessageType: 0,
                StoreId: 0,
                pageIndex: e.num,
                pageSize: e.size,
            }
            let path = `?pageIndex=${param.pageIndex}&pageSize=${param.pageSize}&messageType=0&StoreId=0`
            getInfoListByBusinessId(param, path).then((res) => {
                if (res.Data) {
                    this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                    this.datas = this.datas.concat(res.Data)
                }
            })
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
        refresh() {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
        goDetail(item) {
            this.easyGoTo("/pages_me/packet/message/newsDetails?id=" + item.ID)
        },
    },
    computed: {},
}
</script>

<style lang="scss">
page {
    background: #f5f5f5;
}

.container {
    .list-item {
        padding: 32rpx 20rpx 32rpx 32rpx;
        background: $color-white;
        border-radius: $border-radius-10;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20rpx;
    }

    .main_left {
        position: relative;
        width: 88rpx;
        height: 88rpx;
        background: linear-gradient(-45deg, #59c2f6, #2d9cf8);
        border-radius: 24rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;

        .icon-left {
            font-size: 40rpx;
        }
    }

    .main_right {
        flex: 1;

        & > text {
            color: #666666;
        }

        .font-28 {
            display: flex;
            justify-content: space-between;

            view {
                font-size: 28rpx;
                color: #000000;
            }

            text {
                color: #999;
                font-size: 20rpx;
            }
        }
    }
}
</style>
